<template>
  <el-container>
    <el-aside width="200px">
      <div class="logo-box">
        <img src="@/assets/img/logo.png" />
        <div>
          <p>迪文ERP</p>
        </div>
      </div>
      <vue-scroll :ops="ops_nav" class="vue_scroll">
        <el-menu :default-active="routePath" :default-openeds="openeds" @select="menuSelect" router unique-opened class="el_menu">
          <template v-for="item in menu">
            <el-submenu :index="item.url" v-if="item.children.length != 0">
              <template slot="title">
                <i :class="item.icon" class="icon"></i>
                <span>{{ item.name }}</span>
              </template>
              <template v-for="children in item.children">
                <el-submenu :index="children.url" v-if="children.children.length != 0">
                  <template slot="title">
                    <i :class="children.icon" class="icon"></i>
                    <span>{{ children.name }}</span>
                  </template>
                  <el-menu-item :index="child.url" :key="child.id" v-for="child in children.children">{{ child.name }}</el-menu-item>
                </el-submenu>
                <el-menu-item :index="children.url" v-else>
                  <i :class="children.icon" class="icon"></i>
                  <span>{{ children.name }}</span>
                </el-menu-item>
              </template>
            </el-submenu>
            <el-menu-item :index="item.url" v-else>
              <i :class="item.icon" class="icon"></i>
              <span>{{ item.name }}</span>
            </el-menu-item>
          </template>
        </el-menu>
      </vue-scroll>
      <div class="copyright">
        <p>
          版权所有
          <br />
          北京迪文科技有限公司
        </p>
        <a href="http://www.beian.miit.gov.cn" target="_blank">京ICP备05033781号-5</a>
      </div>
    </el-aside>
    <el-container>
      <el-header>
        <div></div>
        <el-dropdown @command="userManage" trigger="click">
          <div class="user">
            <p>{{ username }}</p>
            <p>{{ real_name }}</p>
          </div>
          <el-dropdown-menu class="user_dropdown" slot="dropdown">
            <el-dropdown-item command="0">退出登录</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </el-header>
      <el-main>
        <div class="main">
          <router-view @pass="passNav" v-if="IsRouterAlive"></router-view>
        </div>
      </el-main>
      <!-- <el-footer>Footer</el-footer> -->
    </el-container>
  </el-container>
</template>
<script>
export default {
  name: "public",
  data() {
    return {
      username: this.$store?.store?.user?.username,
      real_name: this.$store?.store?.user?.real_name,
      menu: [],
      openeds: [],
      routePath: "",
      IsRouterAlive: true,
      ops_nav: {
        bar: {
          background: "#aaa",
          keepShow: true,
        },
      },
      ops: {
        bar: {
          background: "#aaa",
          keepShow: true,
        },
      },
    };
  },
  created() {
    /* try {
			this.username = this.$store.store.user.username;
		} catch (e) {
			this.$router.push({
				path: '/'
			});
			location.reload();
		} */
    this.GetMenu();
  },
  mounted() {
    $(".el_menu").css(
      "max-height",
      $(window).height() - 70 - $(".copyright").height() - 40
    );
  },
  methods: {
    GetMenu() {
      this.menu = [
        {
          name: "仓库管理",
          icon: "el-icon-s-data",
          url: "/product",
          children: [],
        },
        {
          name: "定制信息",
          icon: "el-icon-tickets",
          url: "/information",
          children: [],
        },
				        {
          name: "BOM查询",
          icon: "el-icon-view",
          url: "/query",
          children: [],
        },
        				        {
          name: "新BOM查询",
          icon: "el-icon-view",
          url: "/Newquery",
          children: [],
        },
        {
          name: "生产单管理",
          icon: "el-icon-burger",
          url: "/material",
          children: [],
        },
      ];
      return;
      this.$api.GetMenus({}).then((data) => {
        if (data.code == 0) {
        }
      });
    },
    passNav(navUrl) {
      this.routePath = navUrl;
      for (var i = 0; i < this.menu.length; i++) {
        if (navUrl == this.menu[i].url) {
          this.openeds = [];
          return false;
        }
        for (var j = 0; j < this.menu[i].children.length; j++) {
          if (navUrl == this.menu[i].children[j].url) {
            this.openeds = [this.menu[i].url];
            return false;
          }
        }
      }
    },
    menuSelect(key) {
      this.IsRouterAlive = false;
      this.$nextTick(function () {
        this.IsRouterAlive = true;
      });
    },
    userManage(command) {
      if (command == 0) {
        this.$router.push({
          path: "/",
        });
      }
    },
  },
  beforeDestroy() {},
};
</script>
<style lang="scss">
@import "~@/assets/css/element.scss";
@import "~@/assets/css/public.css";
@import "~@/assets/css/popup.css";
.vue_scroll {
  height: calc(100vh - 60px - 74px) !important;
}
</style>
